@charset "UTF-8";
$vm_base:375;  //设计图的宽度
@function vw($px) {
  @return ($px / $vm_base) * 100vw;
}

.br{
  border:1px solid red;
}

*{
  margin: 0;
  padding: 0;

}
html {
  height: 100%;


}
body{
  height: 100%;
  color:#333;
}
div{
  box-sizing: border-box;
}

.fl{
  float: left;
}
.fr{
  float: right;
}

.detail{
  display: flex;
  flex-direction: column;
  height: 100%;

  .main {
    height: 0;
    width: 100%;
    flex-grow: 1;
    overflow-y: scroll;
    border-radius: vw(20) vw(20) 0 0;
    background: #fff;
    z-index: 999;


    .roominfo{
      display: flex;
      justify-content: space-between;
      padding-left: vw(20);
      padding-right: vw(20);
      margin-top: vw(20);
      .left{
        width: vw(200);
        p:first-child{
          font-size: vw(16);
          font-weight: 600;
          line-height: vw(20);
        }
        p:nth-child(2){
          font-size: vw(12);
          color:#9e9e9e;
          line-height: vw(20);
        }
        p:nth-child(3){
          font-size: vw(12);
           line-height: vw(20);
        }
      }

      .right{
           p:first-child{
             font-size: vw(19);
             color:#fc4e15;
             margin-top: vw(20);
             line-height: vw(15);
           }
        p:nth-child(2){
          font-size: vw(12);
          color:#9e9e9e;
          float: right;
          line-height: vw(30);
        }
      }
    }

    .roomdep{
      font-size: vw(16);
      font-weight: 600;
      margin-top: vw(35);
      padding-left: vw(20);
    }

    .furniture{
      display: flex;
      width: vw(270);
      margin: vw(25) auto 0;
      justify-content: flex-start;
      flex-wrap: wrap;
      .name{
        font-size: vw(14);
        text-align: center;
      }
      &>div{
        text-align: center;
         margin-right: 15px;
        margin-bottom: 15px;
      }
    }



    .iconfont{
      font-size: vw(30);
      color:#9e9e9e;
    }

    .optition{
      font-size: vw(16);
      font-weight: 600;
      margin-top: vw(35);
      padding-left: vw(20);
    }

    .map{
      height: vw(200);
      margin-top: vw(20);
      overflow: hidden;
    }


    .mapbox{
      border-bottom: 1px solid #efefef;
      display: flex;
      flex-direction: column;
    }

    .mapnav{
      height: vw(40);
      border-bottom: 1px solid #efefef;
      line-height: vw(40);
      display: flex;
      justify-content: space-around;
      padding-left: vw(50);
      padding-right: vw(50);
     div{
       font-size: vw(15);
       font-weight: 600;
       position: relative;
     }

      .isactive{
        position: relative;
      }
      .isactive:after{
        content:'';
        position: absolute;
        width: 20px;
        height: 3px;
        background: #ffd03b;
        left:50%;
        transform: translateX(-50%);
        bottom:vw(-2);
        border-radius: vw(10);
      }

    }

    .content{
      height: 0;
      flex-grow: 1;
      overflow-y:scroll;
      padding-left: vw(15);
      padding-right: vw(15);
    }

    .mapinfo{
      height:vw(60);
      border-bottom:1px solid #efefef;
      padding-left:vw(30);
      padding-right:vw(10);
      display:flex;
      justify-content: space-between;

      .left{
        margin-top: vw(20);
        p:first-child{
          font-weight: 600;
          margin-top: vw(15);
          font-size:vw(16);
          line-height: vw(25);
        }
        p:nth-child(2){
          font-size: vw(12);
          color:#9e9e9e;
        }
      }

      .right{
        p:nth-child(1){
          font-size: vw(16);
          margin-top: vw(20);
          font-weight: 600;
        }
        p:nth-child(2){
          font-size: vw(12);
          line-height: vw(25);
        }
      }
    }

  }

  .type{
    padding-left: vw(20);
    display: inline-block;
    button{
      width: vw(90);
      height: vw(30);
      line-height: vw(30);
      border: 1px solid #ccc;
      border-radius:vw(3) ;
      background: #fff;
      margin-top: vw(20);

    }
  }
  .hezu{

    float: left;
    margin-top: vw(20);
    margin-right: vw(20);
    padding-left: vw(20);
    button{
      width: vw(90);
      height: vw(30);
      line-height: vw(30);
      border: 1px solid #ccc;
      border-radius:vw(3) ;
      background: #fff;
    }
  }
 .littlebox{
    height:vw(215);
  }
    .image{
      height: vw(250);
      position: relative;
    }

  .goback{
    color:#ccc;
    position: absolute;
    top:vw(10);
    left:vw(10);
    font-size: vw(20);
  }
    .index{
      width: vw(40);
      height: vw(20);
      border-radius: vw(20);
      z-index: 999;
      position: absolute;
      right: vw(15);
      top:vw(180);
      background: #79756e;
      color:#fff;
      font-size: vw(12);
      text-align: center;
      line-height: vw(20);
    }
  }

  .bottom{
    height: vw(40);
    display: flex;
    justify-content: space-between;

    div{
      display: inline-block;
      height: vw(40);
      width: vw(125);
      color:#fff;
      text-align: center;
      line-height:vw(40);
      font-size: vw(17);


  }
}
